<div id="tab-restriction" class="tab-pane">
    <div class="card" style="margin-bottom: 24px;">
        <div class="form-group" style="margin-bottom: 0;">
            <label style="display: flex; align-items: center; cursor: pointer; font-size: 16px; font-weight: 600; color: #1f2937;">
                <input type="checkbox" id="chkEnableRestriction" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer; accent-color: #667eea;" onchange="updateRestrictionEnabled(this.checked)">
                <span>启用 IP/MAC 地址限制</span>
            </label>
            <p style="margin: 8px 0 0 32px; color: #6b7280; font-size: 13px;">启用后，系统将根据配置的规则过滤客户端连接请求</p>
        </div>
    </div>
    
    <div class="card" style="margin-bottom: 24px;">
        <div class="form-group" style="margin-bottom: 0;">
            <label style="display: block; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #374151;">限制模式</label>
            <div style="display: flex; flex-direction: column; gap: 12px;">
                <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; background: #f9fafb; border-radius: 6px; transition: all 0.2s; border: 2px solid transparent;" onmouseover="this.style.background='#f3f4f6'; this.style.borderColor='#e5e7eb';" onmouseout="this.style.background='#f9fafb'; this.style.borderColor='transparent';">
                    <input type="radio" name="restrictionMode" value="blacklist" onchange="updateRestrictionMode(false)" style="margin-right: 12px; width: 18px; height: 18px; cursor: pointer; accent-color: #667eea;">
                    <div style="flex: 1;">
                        <div style="font-weight: 500; color: #1f2937; margin-bottom: 2px;">黑名单模式</div>
                        <div style="font-size: 13px; color: #6b7280;">禁止列表中的 IP/MAC 地址访问</div>
                    </div>
                </label>
                <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; background: #f9fafb; border-radius: 6px; transition: all 0.2s; border: 2px solid transparent;" onmouseover="this.style.background='#f3f4f6'; this.style.borderColor='#e5e7eb';" onmouseout="this.style.background='#f9fafb'; this.style.borderColor='transparent';">
                    <input type="radio" name="restrictionMode" value="whitelist" onchange="updateRestrictionMode(true)" style="margin-right: 12px; width: 18px; height: 18px; cursor: pointer; accent-color: #667eea;">
                    <div style="flex: 1;">
                        <div style="font-weight: 500; color: #1f2937; margin-bottom: 2px;">白名单模式</div>
                        <div style="font-size: 13px; color: #6b7280;">仅允许列表中的 IP/MAC 地址访问</div>
                    </div>
                </label>
            </div>
        </div>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
        <div class="card" style="display: flex; flex-direction: column;">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f3f4f6;">
                <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: #1f2937;">IP 地址规则</h3>
                <span style="font-size: 12px; color: #9ca3af; background: #f3f4f6; padding: 4px 10px; border-radius: 12px;" id="ipRulesCount">0 条</span>
            </div>
            <div style="display: flex; gap: 10px; margin-bottom: 16px;">
                <button class="btn btn-primary" onclick="showAddIpRuleDialog()" style="flex: 1; padding: 10px 16px; font-size: 14px; font-weight: 500;">+ 添加 IP 规则</button>
                <button class="btn btn-danger" onclick="removeSelectedIpRule()" style="padding: 10px 16px; font-size: 14px; font-weight: 500;" disabled id="btnRemoveIpRule">删除选中</button>
            </div>
            <div id="ipRulesList" style="flex: 1; min-height: 200px; max-height: 400px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa;">
                <div style="text-align: center; padding: 40px 20px; color: #9ca3af;">
                    <div style="font-size: 48px; margin-bottom: 12px; opacity: 0.3;">📋</div>
                    <p style="margin: 0; font-size: 14px;">暂无 IP 规则</p>
                    <p style="margin: 8px 0 0 0; font-size: 12px; color: #d1d5db;">点击上方按钮添加规则</p>
                </div>
            </div>
        </div>
        
        <div class="card" style="display: flex; flex-direction: column;">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f3f4f6;">
                <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: #1f2937;">MAC 地址规则</h3>
                <span style="font-size: 12px; color: #9ca3af; background: #f3f4f6; padding: 4px 10px; border-radius: 12px;" id="macRulesCount">0 条</span>
            </div>
            <div style="display: flex; gap: 10px; margin-bottom: 16px;">
                <button class="btn btn-primary" onclick="showAddMacRuleDialog()" style="flex: 1; padding: 10px 16px; font-size: 14px; font-weight: 500;">+ 添加 MAC 规则</button>
                <button class="btn btn-danger" onclick="removeSelectedMacRule()" style="padding: 10px 16px; font-size: 14px; font-weight: 500;" disabled id="btnRemoveMacRule">删除选中</button>
            </div>
            <div id="macRulesList" style="flex: 1; min-height: 200px; max-height: 400px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa;">
                <div style="text-align: center; padding: 40px 20px; color: #9ca3af;">
                    <div style="font-size: 48px; margin-bottom: 12px; opacity: 0.3;">📋</div>
                    <p style="margin: 0; font-size: 14px;">暂无 MAC 规则</p>
                    <p style="margin: 8px 0 0 0; font-size: 12px; color: #d1d5db;">点击上方按钮添加规则</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card" style="background: linear-gradient(135deg, #f0f4ff 0%, #f8f9fa 100%); border: 1px solid #e0e7ff;">
        <div style="display: flex; align-items: start; gap: 12px;">
            <div style="font-size: 24px; line-height: 1;">💡</div>
            <div style="flex: 1;">
                <div style="font-weight: 600; color: #1f2937; margin-bottom: 8px; font-size: 14px;">使用提示</div>
                <div style="color: #4b5563; font-size: 13px; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>IP 规则格式：</strong></div>
                    <div style="margin-left: 12px; margin-bottom: 8px;">
                        • 单个 IP：<code style="background: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">192.168.1.100</code><br>
                        • CIDR 网段：<code style="background: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">192.168.1.0/24</code><br>
                        • IP 范围：<code style="background: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">192.168.1.1-192.168.1.100</code>
                    </div>
                    <div style="margin-bottom: 6px;"><strong>MAC 规则格式：</strong></div>
                    <div style="margin-left: 12px;">
                        • 完整地址：<code style="background: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">00:11:22:33:44:55</code><br>
                        • 通配符：<code style="background: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">00:11:22:*:*:*</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
